<template>
	<view class="main">
		<u-overlay :show="share" @click="close" :zoom="false" :custom-style="{ background: 'rgba(0,0,0,.8)' }"
			:duration="0">
			<view class="box" @tap.stop>
				<!-- <image class="down" src="../static/images/share/save.png" mode="aspectFill" @click="html2canvas.create">
				</image> -->
				<view class="down" @click="html2canvas.create">
					<text>下载</text>
					<u-icon name="download" color="#fff"></u-icon>
				</view>
				<view class="content" :domId="domId" id="html2canvas" ref="html2canvas">
					<img :src="$api.inviteBg" class="bg"></img>

					<view class="title">
						<view class="text"><text>{{ userInfo.nickname }}</text>的专属邀请码</view>
						<text class="qr">{{info.code}}</text>
					</view>
					<view class="cont">
						
						<div class="qrcode" ref="qrCodeUrl">
							<img :src="info.poster_path" mode="aspectFill" class="img"></img>
						</div>
						<!-- <view class="tips">
							长按识别二维码
						</view> -->
					</view>
					<!-- 	<view class="btn"   @click="html2canvas.create">
						保存
					</view> -->
				</view>
			</view>
		</u-overlay>

		<u-popup :show="show" closeable @close="close">
			<view class="img">
				<block v-if="imgUrl">
					<image :src="imgUrl" :style="{width:imgWidth+'px',height: imgHeight+'px'}" mode="aspectFill">
					</image>
					<view class="tips">长按图片保存到相册</view>
				</block>
				<u-loading-page :loading="!imgUrl" loading-text="正在生成图片"></u-loading-page>
			</view>

		</u-popup>
	</view>

</template>


<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "html2canvas",
		props: {
			domId: '',
			share: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			show: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				imgUrl: '',
				imgHeight: 100,
				imgWidth: 100,
			};
		},
		mounted() {

		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			share_qrcode(option) {
				console.log('option-------------', option);
				if (option) {
					// this.info=option
				}
			},
			close() {
				this.$emit('close', false)
			},
			// 保存到系统相册
			saveShareImg(base64) {
				// uni.showLoading({
				// 	title: '正在生成图片'
				// })
				const bitmap = new plus.nativeObj.Bitmap("test");
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
					console.log('saveHeadImgFile', url)
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						quality: 'quality' // 图片清晰度
					}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								uni.showToast({
									title: '图片保存成功',
									icon: 'none'
								})
								this.share = false
								// uni.hideLoading()
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						// uni.hideLoading()
						bitmap.clear()
					});
				}, (e) => {
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
					// uni.hideLoading()
					bitmap.clear()
				});
			}

		},

	}
</script>
<script module="html2canvas" lang="renderjs">
	import html2canvas from 'html2canvas';
	export default {
		props: {
			domId: ''
		},
		data() {
			return {
				imgUrl: ''
			}
		},
		methods: {
			toImage() {
				let imgHeight = document.querySelector('#html2canvas').offsetHeight // 获取DOM高度
				let imgWidth = document.querySelector('#html2canvas').offsetWidth // 获取DOM宽度
				html2canvas(document.querySelector('#html2canvas'), {
					width: imgWidth,
					height: imgHeight,
					backgroundColor: null,
					useCORS: true // 解决文件跨域问题
				}).then(canvas => {
					const url = canvas.toDataURL('image/png', 1) // 生成的图片
					// 可以上传后端或者直接显示
					console.log('[生成图片-------------]', url)
				})
			},
			async create(domId) {
				console.log('执行', domId)
				try {
					const timeout = setTimeout(async () => {
						const shareContent = document.querySelector('#html2canvas');
						const canvas = await html2canvas(shareContent, {
							width: shareContent.offsetWidth, //设置canvas尺寸与所截图尺寸相同，防止白边
							height: shareContent.offsetHeight, //防止白边
							logging: true,
							useCORS: true,
							backgroundColor: null,
							scale: 2,
							dpi: 1000
						});
						const base64 = canvas.toDataURL('image/png', 2);
						// console.log('[生成图片-------------]',base64)
						this.$ownerInstance.callMethod('saveShareImg', base64);
						clearTimeout(timeout);
					}, 500);
				} catch (error) {
					console.log("错误", error)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		.down {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 116rpx;
			height: 54rpx;
			// border-radius: 100%;
			margin-right: 10rpx;
			position: absolute;
			top: 0;
			z-index: 9999;
			right: 0;
			font-size: 28rpx;
			background: #2A4D9D;
			border-radius: 8rpx;
			// font-weight: 600;
			color: #fff;
		}

		.box {
			position: relative;
			width: 602rpx;
			height: 1062rpx;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
		}

		.content {
			position: fixed;
			// position: relative;
			top: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			width: 602rpx;
			height: 1062rpx;
			position: relative;
			padding: 20rpx 20rpx;

			.bg {
				width: 602rpx;
				height: auto;
				position: absolute;
				top: 0;
				z-index: -1;

			}

			.stop {
				display: flex;
				margin: 20rpx;

				.pic {
					height: 84rpx;
					width: 84rpx;
					border-radius: 100%;
					margin-right: 10rpx;
				}

				.right {
					display: flex;
					align-items: flex-start;
					flex-direction: column;

					.txt {
						font-size: 28rpx;
						font-weight: 600;
						// color: #FFFFFF;
						line-height: 40rpx;
					}

					.txts {
						font-size: 22rpx;
						// color: #FFFFFF;
					}
				}
			}
			
			.title {
				position: absolute;
				top: 520rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				line-height: 40rpx;
				
				.text {
					margin: 10rpx 0;
				}
				.qr {
					display: flex;
					align-items: center;
					justify-content: center;
					// width: 280rpx;
					height: 88rpx;
					background: #FFFFFF;
					font-size: 40rpx;
					color: #2A4D9D;
					// text-align: center;
					// line-height: 88rpx;
					border: 1rpx solid #C8C8D4;
					padding: 8rpx 41rpx;
					box-sizing: border-box;
					// margin-left: 20rpx;
					// margin-right: 10rpx;
				}
			
				.fzico {
					height: 28rpx;
					width: 28rpx;
				}
			
			}

			.cont {
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// flex-direction: column;
				// margin: 476rpx 50rpx 62rpx;
				// background: #FFFFFF;
				border-radius: 40rpx;
				padding: 40rpx;

				

				.qrcode {
					// margin: 6rpx auto;
					position: absolute;
					bottom: 240rpx;
					right: 40rpx;

					.img {
						width: 140rpx;
						height: 140rpx;
						background-color: #fff; //设置白色背景色
						padding: 6rpx; // 利用padding的特性，挤出白边
						box-sizing: border-box;
					}
				}

				.tips {
					font-size: 28rpx;
					font-weight: 600;
					color: #A7A7A7;
					line-height: 40rpx;
				}
			}
		}

		.img {
			padding: 90rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		::v-deep .u-popup__content {
			background-color: rgba(0, 0, 0, 0.3) !important
		}

		.btn {
			background: #F2E0BC;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			text-align: center;
			margin-top: 50rpx;
			border-radius: 8rpx;
		}
	}
</style>
